---
title: React Dropdown - Flowbite
description: Use the dropdown component to trigger a list of menu items when clicking on an element such as a button or link based on multiple styles, sizes, and placements with React
---

The dropdown component is a UI element built with React that displays a list of items when a trigger element (e.g., a button) is clicked. You can use it to build dropdown menus, lists, and more.

The default styles are built using utility classes from Tailwind CSS. You can customize the behavior and positioning of the dropdowns using custom props from React.

To start using the component make sure that you have imported it from Flowbite React:

```jsx
import { Dropdown } from "flowbite-react";
```

## Default dropdown

Use this example to create a simple dropdown with a list of menu items by adding child `<DropdownItem>` components inside the main `<Dropdown>` component.

<Example name="dropdown.root" />

## Dropdown divider

Use the `<DropdownDivider>` component to add a divider between the dropdown items.

<Example name="dropdown.divider" />

## Dropdown header

Use the `<DropdownHeader>` component to add a header to the dropdown. You can use this to add a user profile image and name, for example.

For more complex headers that include an `<input>` or `<TextInput>` control, set `enableTypeAhead` to `false` on the `<Dropdown>` to prevent keystrokes from being interpreted as item searches.

<Example name="dropdown.header" />

## Dropdown items with icon

Add custom icons next to the menu items by using the `icon` prop on the `<DropdownItem>` component.

<Example name="dropdown.itemsWithIcon" />

## Inline dropdown

Use the `inline` prop to make the dropdown appear inline with the trigger element.

<Example name="dropdown.inline" />

## Dropdown sizes

You can use the `size` prop to change the size of the dropdown. The default size is `md`.

<Example name="dropdown.sizes" />

## Placement options

Use the `placement` prop to change the placement of the dropdown by choosing one of the following options: `top`, `right`, `bottom` or `left`. If there is not enough space then the dropdown will be automatically repositioned.

<Example name="dropdown.placement" />

## Click event handler

Add a custom `onClick` event handler to the `<DropdownItem>` component to handle the click event.

<Example name="dropdown.events" />

## Custom trigger

To customize the trigger element, you can use the `renderTrigger` property.

<Example name="dropdown.customTrigger" />

## Custom item

To customize the `Dropdown.Item` base element you can use the `as` property.

<Example name="dropdown.customItem" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<Theme name="dropdown" />

## References

- [Flowbite Dropdown](https://flowbite.com/docs/components/dropdowns/)
